<template>
  <div
    class="items-box"
    @click="onFriend({ id: item.wxid })"
    v-for="item in filterItem"
    :key="item.wxid"
  >
    <div class="left-item">
      <UserAvatar
        words="3"
        shape="square"
        :convId="item.wxid"
        :nickName="item.nickname"
        :type="isGroup ? 'group' : 'group'"
      />
    </div>
    <div class="right-item " :class="{ between: item.remark }">
      <p>{{ item.nickname }}</p>
      <p class="describe">
        {{ item.remark }}
      </p>
    </div>
  </div>
</template>

<script>
// import { scrollToMessage } from "@/utils/chat/index";
import UserAvatar from "@/components/UserAvatar/index.vue";
import FontIcon from "@/components/FontIcon/index.vue";

export default {
  name: "CardGrid",
  components: {
    UserAvatar
  },
  props: {
    item: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "GROUP", // C2C  GROUP
    },
  },
  computed: {
    isGroup() {
      return this.type === "GROUP";
    },
    // 去除无昵称
    filterItem () {
      return this.item.filter(item => item.nickname);
    }
  },
  data() {
    return {};
  },
  methods: {
    onFriend({ id }) {
      // "GROUP" : "C2C";
      // this.$store.commit("taggleOueSide", "message");
      // this.$store.dispatch("addConversation", { convId: `${this.type}${id}` });
      // scrollToMessage(`message_${this.type}${id}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.items-box {
  display: flex;
  min-height: 50px;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  &:hover {
    background: var(--pure-hover-color);
  }
  .left-item {
    img {
      width: 40px;
      height: 40px;
    }
  }
  .right-item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 10px;
    width: 100%;
    .describe {
      @include text-ellipsis;
      width: calc(100% - 40px);
      font-size: 12px;
      color: var(--color-time-divider);
    }
    .el-icon {
      cursor: pointer;
    }
  }
}
.between {
  justify-content: space-between !important;
}
</style>
